<div class="project-role-edit container-fluid">
  <div class="row">
    <div class="edit-toolbar col-xl-12">
      <div class="title">
        <span *ngIf="!projectRole?.id">新建项目角色</span>
        <span *ngIf="projectRole?.id">编辑项目角色</span>
      </div>
      <div class="buttons">
        <button [routerLink]="['/pages/org-admin/test-settings/project-role/list']" type="button"
                class="btn btn-secondary btn-with-icon btn-sm back">
          <i class="fa fa-arrow-circle-left"></i>返回
        </button>
      </div>
    </div>

    <div class="instruction no-span">
      <span>此处仅设置项目的</span>
      <span [outerHTML]="'配置' | term"></span><span>权限，</span>
      <span [outerHTML]="'增加' | term"></span><span>、</span>
      <span [outerHTML]="'删除' | term"></span><span>项目的权限在组织角色层面设置。</span>
    </div>
  </div>
  <hr/>

  <div class="tabs-container">
    <div class="tabs">
      <ngb-tabset  (tabChange)="tabChange($event)">
        <ngb-tab id="info">
          <ng-template ngbTabTitle>基本信息</ng-template>
          <ng-template ngbTabContent></ng-template>
        </ngb-tab>
        <ngb-tab id="privileges">
          <ng-template ngbTabTitle>权限</ng-template>
          <ng-template ngbTabContent></ng-template>
        </ngb-tab>
      </ngb-tabset>
    </div>
  </div>

  <div class="tab-bottom-space"></div>

  <div [class.hidden]="tab != 'info'" class="project-role-edit-info">
    <form [formGroup]="form" class="my-validate-form">
      <div class="form-group row">
        <label class="col-sm-2 col-form-label"><span>名称</span></label>
        <div class="col-sm-4">
          <input type="text" class="form-control" name="name" formControlName="name"
                 [(ngModel)]="projectRole.name" #name>
        </div>
      </div>

      <div class="form-group row">
        <label class="col-sm-2 col-form-label"><span>描述</span></label>
        <div class="col-sm-10">
              <textarea type="text" class="form-control" name="descr" formControlName="descr"
                        [(ngModel)]="projectRole.descr" #descr></textarea>
        </div>
      </div>
      <div class="form-group row">
        <div class="offset-sm-2 col-sm-10">
          <div class="form-check">
            <label class="form-check-label">
              <input type="checkbox" class="form-check-input" name="disabled" formControlName="disabled"
                     [(ngModel)]="projectRole.disabled" #disabled>
              &nbsp;&nbsp;归档
            </label>
          </div>
        </div>
      </div>
    </form>
  </div>

  <div [class.hidden]="tab != 'privileges'" class="project-role-edit-privileges">
    <div class="form-group row">
      <label class="col-sm-1"></label>
      <div class="col-sm-10">
        <table class="grid">
          <colgroup>
            <col class="col-name">
            <col class="col-input">
            <col class="col-input">
            <col class="col-input">
          </colgroup>
          <tbody>
            <tr class="header">
              <th>权限</th>
              <th class="checkboxWithTitle">查看</th>
              <th class="checkboxWithTitle">配置/维护</th>
              <th class="checkboxWithTitle">删除</th>
              <th class="checkboxWithTitle">评审</th>
              <th class="checkboxWithTitle">执行</th>
              <th class="checkboxWithTitle">关闭</th>
            </tr>

            <tr *ngFor="let items of (projectPrivileges | mapToArray)" class="row even">
              <td>{{items.key}}</td>
              <td class="tick">
                <span *ngIf="items.value.view">
                  <span class="checkbox-name"></span>
                  <input type="checkbox" [(ngModel)]="items.value.view.selecting">
                </span>
              </td>
              <td class="tick">
                <span *ngIf="items.value.maintain">
                  <span class="checkbox-name"></span>
                  <input type="checkbox" [(ngModel)]="items.value.maintain.selecting">
                </span>
              </td>
              <td class="tick">
                <span *ngIf="items.value.delete">
                  <span class="checkbox-name"></span>
                  <input type="checkbox" [(ngModel)]="items.value.delete.selecting">
                </span>
              </td>
              <td class="tick">
                <span *ngIf="items.value.review">
                  <span class="checkbox-name"></span>
                  <input type="checkbox" [(ngModel)]="items.value.review.selecting">
                </span>
              </td>
              <td class="tick">
                <span *ngIf="items.value.exe">
                  <span class="checkbox-name"></span>
                  <input type="checkbox" [(ngModel)]="items.value.exe.selecting">
                </span>
              </td>
              <td class="tick">
                <span *ngIf="items.value.close">
                  <span class="checkbox-name"></span>
                  <input type="checkbox" [(ngModel)]="items.value.close.selecting">
                </span>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
      <label class="col-sm-1"></label>
    </div>
  </div>

  <div class="form-group row">
    <label class="col-sm-2 col-form-label"></label>
    <div class="col-sm-10">
      <button (click)="save()" type="button" class="btn btn-primary" [disabled]="!form.valid">保存</button>
      &nbsp;
      <button [routerLink]="['/pages/org-admin/test-settings/project-role/list']" type="button" class="btn btn-default">取消</button>
      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
      <button (click)="showModal()" *ngIf="projectRole.id" type="button" class="btn btn-danger">删除</button>
    </div>
  </div>

  <div class="form-group row">
    <label class="col-sm-2 col-form-label"></label>
    <div class="col-sm-10">
      <div class="validate-errors">
        <div class="validate-error" *ngFor="let msg of formErrors">
          <div>{{ msg }}</div>
        </div>
      </div>
    </div>
  </div>

</div>

<pop-dialog #modalWrapper (confirm)="delete()" [title]="'提示'">
  确认删除名为"{{projectRole?.name}}"的项目角色?
</pop-dialog>
